<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>计数器</title>

        <style type="text/css">

            body {
                /* 定义或重置一个计数器 */
                counter-reset: chapter;
            }

            .chapter {
                width: 80vw;
                min-height: 50px;
                border: 1px solid blue;
                margin: 10px auto;
                /* 定义或重置一个计数器 */
                counter-reset: section;
            }

            .chapter>h1::before {
                counter-increment: chapter;
                content: "第" counter(chapter) "章、";
            }

            .chapter>p::before {
                counter-increment: section;
                /* content: "第" counter(section) "节: "; */
                content: counter(chapter) "." counter(section) "、";
            }
        </style>
    </head>

    <body>

        <div class="chapter">
            <h1>猴王初问世</h1>
            <p>很久很久以前，....</p>
            <p>在那海的那岛上的那山上有一块那石，那天，....</p>
        </div>

        <div class="chapter">
            <h1>风雪山神庙</h1>
            <p>八十万禁军教头，....</p>
            <p>在那天是怎么死掉的，....</p>
        </div>

        <div class="chapter">
            <h1>猴王闹天宫</h1>
        </div>

        <div class="chapter">
            <h1>黛玉出墙记</h1>
        </div>

        <div class="chapter">
            <h1>七擒孟获记</h1>
        </div>

    </body>
</html>